import { Typography } from 'antd';
import { useTranslation } from 'react-i18next';

import { PrismCode } from '@/components/SourceCode';
import { VulnerableProps } from '@/components/VulnerableTemplate/type';
import fileCode from '@/pages/vulnerable/code/file';

import { download } from '../../service';
import styles from '../index.module.scss';

const { Title, Link } = Typography;

const codeProps: PrismCode = {
  language: 'tsx',
  code: fileCode.download,
};

const Vulnerable: React.FC = () => {
  const { t } = useTranslation();
  const imgArr = ['like1.jpg', 'like2.jpg', 'like3.jpg', 'like4.jpg'];

  const downloadImg = async (filename: string) => {
    await download(filename);
  };

  return (
    <>
      <Title level={4} italic>
        {t('file.download.title')}
      </Title>
      <section className="flex hdpi:flex-row ldpi:flex-col w-full">
        {imgArr.map((i, idx) => (
          <div 
            key={idx}
            className="flex flex-col items-center hdpi:w-1/4 ldpi:w-full p-2"
            onClick={() => downloadImg(i)}
          >
            <img
              className={styles.downImage}
              // className="flex-1 cursor-pointer rounded-md"
              src={`/fileDownload?filename=${i}`}
              alt="nonono"
            />
            <Link className="mt-2">{i}</Link>
          </div>
        ))}
      </section>
    </>
  );
};

const FileDownload: VulnerableProps = {
  vulnerable: <Vulnerable />,
  codeProps,
  causesSolutions: {
    type: 'file',
    hasCompare: false,
    solutions: 4,
  },
};

export default FileDownload;
